<template>
  <!-- 一级路由 -->
  <RouterView />
  <!--
  测试
  <XtxMessage text="用户名或密码不正确" type="success" />
  -->
  <!--
  测试
  <XtxConfirm text="亲，您是否确认删除该商品"/>
  -->
</template>
<!--<template>
  <!~~ vue2.x需要恨元素,vue3.x可以是代码片段 Fragment ~!>
  <div>app
    <!~~ 1.使用根模块的store的数据~~>
    {{$store.state.username}}
    <!~~ 2..使用根模块的 getters 的数据~~>
    {{$store.getters.newName}}
    <button @click="updatedName">提交</button>
  </div>
</template>
<script>
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup () {
    // 1.使用根模块的store的数据
    const store = useStore()
    console.log(store.state.username)
    // 2..使用根模块的 getters 的数据-
    console.log(store.getters.newName)
    // 3..提交根模块的 mutations 的数据
    const updatedName = () => {
      store.commit('updatedName')
    }
    return {
      updatedName
    }
  }
}
</script>-->

<!--<template>
    <div>
      <!~~ 使用A 模块的state数据 ~~>
      <p>{{$store.state.modulesA.username}}</p>
      <!~~ 使用A 模块的getters数据 ~~>
      <p>{{$store.getters.newName}}</p>
      <hr>
      <!~~ 使用B 模块的state数据 ~~>
      <p>{{$store.state.modulesB.username}}</p>
      <!~~ 使用b 模块的getters数据 ~~>
      <p>{{$store.getters['modulesB/newName']}}</p>
      <button @click="mutationsFn">mutations</button>
      <button @click="actionsFn">actions</button>
    </div>
</template>

<script>
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup () {
    const store = useStore()
    const mutationsFn = () => {
      // 2.3 提交B模块的修改
      store.commit('modulesB/updatedName')
    }
    const actionsFn = () => {
      // 2.4 调用B模块的actions
      store.dispatch('modulesB/updatedName')
    }
    return {
      mutationsFn,
      actionsFn
    }
  }
}
</script>-->

<!--<template>
    <div>
      APP
      <!~~ 修改数据，测试是否持久化 ~~>
      {{$store.state.user.profile.account}}
      <button @click="$store.commit('user/setUser',{account:'zf'})">设置用户信息</button>
    </div>
</template>-->
<!--<template>
    <div>
APP <button @click="fn">测试request工具函数</button>
    </div>
</template>

<script>
import request from '@/utils/request'
export default {
  setup () {
    const fn = () => {
      // 测试请求
      request('/member/profile', 'get', { a: 10 })
    }
    return { fn }
  }
}
</script>-->
